<template>
	<view class="container">
		<view class="content">
			<view class="formTitle">反馈内容</view>
			<u-input
			v-model="temp.feedbackContent" 
			type="textarea"
			:maxlength="500"
			:height="140" 
			placeholder="请输入反馈内容"
			placeholder-style="color: #483D33;"
			:auto-height="true" />
			
			<!-- <view class="formTitle">上传图片（{{fileList.length}}/9）</view>

			<zjq-upload v-model="fileList" closeImg="/static/cha.png" @onSuccess="handleUrl" :max="9"
				:listStyle="{columns: 3,columnGap: '20rpx',rowGap:'20rpx',padding:'10rpx',height:'200rpx',radius:'20rpx'}">
				<template v-slot:addImg>
					<view class="addIamge">+</view>
				</template>
			</zjq-upload> -->
		</view>

		<view class="content" style="padding: 20upx 30upx">
			<view class="box">
				<view class="title">联系方式</view>
				<view class="" style="flex: 1;">
					<u-input 
					v-model="temp.contactInformation" 
					type="text" 
					placeholder="输入联系方式" 
					placeholder-style="color: #483D33" />
				</view>
			</view>
		</view>
		
		<view class="button" :class="btnLoading?'btnLoading':''" @click="onSubmit">提交</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { onShow, onLoad, onShareAppMessage } from "@dcloudio/uni-app"
	import Api from '@/api/modules/home.ts'
	
	let temp = ref<any>({
		feedbackContent: '',  // 回复内容
		fileUrl: null,  // 附件
		contactInformation: null,  // 联系方式
		feedbackType: '用户反馈',
	})
	let fileList = ref<any>([])
	let btnLoading = ref<boolean>(false)
	
	const onSubmit = () => {
		if (!temp.value.feedbackContent) {
			uni.showToast({ title: '请输入回复内容', icon: 'none' });
			return;
		}
		if (!temp.value.contactInformation) {
			uni.showToast({ title: '请输入联系方式', icon: 'none' });
			return;
		}
		if(btnLoading.value){
			return;
		}
		btnLoading.value = true
		
		Api.feedback(temp.value).then((res: any) => {
			console.log(res)
			if(res.code == 200){
				uni.showToast({ title: '反馈成功', icon: 'none' });
				setTimeout(() => {
					uni.navigateBack();
					btnLoading.value = false
				}, 1500)
			} else {
				btnLoading.value = false
			}
		}).catch(err=>{
			btnLoading.value = false
		})
		
	}
	
	onLoad(()=>{
		
	})
	
</script>

<style lang='scss' scoped>
	.container{
		padding: 20upx 0;
	}

	.content {
		background: #f0f0f0;
		margin-bottom: 20upx;
		padding: 30upx;
		color: #00000099;

		.box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				width: 160upx;
				color: #000000;
				font-weight: 600;
			}
		}

		.formTitle {
			margin-bottom: 20upx;
			color: #000000;
			font-weight: 600;
		}
	}
	
	.addIamge{
		width: 200rpx;
		height: 200rpx;
		margin-left: 20rpx;
		background: #F4F5F7;
		font-size: 60upx;
		line-height: 200rpx;
		text-align: center;
		border-radius: 10upx;
	}
	
	.button {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #5EB847;
		color: #fff;
		padding: 20upx;
		border-radius: 50upx;
		text-align: center;
		font-weight: 600;
		height: 100%;
		width: 90%;
		margin: 5%;
		font-size: 28upx;
	}
	
	.btnLoading{
		background: #5EB84780 !important;
		/* border: 1px solid #0092FF80 !important; */
	}
</style>